<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Baidu Map </title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #map {
            height: 100%
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TCWtwqPWaVGhSnTaGmzn0IxrGHaMUtjG"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
    var area = '肇东市';

    // 创建地图实例
    var map = new BMap.Map("map");
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom();


    // 个性化地图，设置地图样式为“midnight”
    // var mapStyle = {style: "midnight"}
    // map.setMapStyle(mapStyle);

    // 获取地图的中心点
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(area, function (point) {
        if (point) {
            // 设置中心点坐标和地图级别
            map.centerAndZoom(point, 10);
        }
    }, area);

    //异步获取POI数据
    axios.post('/poi/list', {
        area: area
    })
        .then(function (response) {
            if (response.status == 200) {
                if (null != response.data) {
                    var poiList = [];
                    response.data.forEach(function (poi, index) {
                        //添加图标
                        addMarker(poi, index);
                    });
                }
            }
        })
        .catch(function (error) {
            console.log(error);
        });


    /*var myIcon = new BMap.Icon("image/youtao.png", new BMap.Size(5, 5), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMap.Size(10, 25),
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移
        });*/



    var labelStyle = {
        color: "red",
        fontSize: "12px",
        height: "20px",
        lineHeight: "20px",
        fontFamily: "微软雅黑"
    }

    /**
     * 添加图标
     * @param point
     * @param index
     */
    function addMarker(poi, index) {
        // 创建坐标点
        var point = new BMap.Point(poi.location.lng, poi.location.lat);

        var icon='image/icon_other.png';
        if(index%3==0){
            icon='image/icon_cnpc.png';
        }else if(index%3==1){
            icon='image/icon_sinopec.png';
        }else{
            icon='image/icon_other.png';
        }

        var myIcon = new BMap.Icon(icon, new BMap.Size(50, 50));

        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker);
        addClickHandler(marker, poi.name);

        var opts = {
            position: point,    // 指定文本标注所在的地理位置
            offset: new BMap.Size(15, -15)    //设置文本偏移量
        }

        var label = new BMap.Label(poi.name, opts);
        label.setStyle(labelStyle);
        map.addOverlay(label);
    }

    /**
     * 添加点击标注的事件处理
     * @param marker
     * @param content
     */
    function addClickHandler(marker, content) {
        marker.addEventListener("click", function (e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            // 创建信息窗口对象
            var infoWindow = new BMap.InfoWindow(content, infoOpts);
            //开启信息窗口
            map.openInfoWindow(infoWindow, point);
        });
    }

    var infoOpts = {
        width: 250,     // 信息窗口宽度
        height: 80,     // 信息窗口高度
        title: "信息窗口", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

</script>
</html>